<template>
  <div class="ui_orders" style="padding-top:46px">
    <van-nav-bar title="我的订单" fixed>
      <van-icon name="arrow-left" slot="left" color="#333" @click="back"></van-icon>
    </van-nav-bar>
    <van-tabs class="tabs" v-model="active" :swipe-threshold="5" sticky swipeable>
      <van-tab v-for="item in otabs" :title="item.name" :key="item.key">
        <van-list v-model="loading" :finished="finished" @load="onLoad" >
          <van-panel v-for="item in list" :key="item" class="o_panel">
            <div slot="header" class="o_panel_header">
              <div class="left_box">
                <img class="img" src="../../asset/images/1.png">
              </div>
              <div class="center_box">
                <p class="p1">未知废品种类-未知重量</p>
                <p class="p2">XXX师傅已接单-正在赶往路上</p>
                <p class="p2">2018.08.08    12:12</p>
              </div>
              <div class="right_box">
                <p>待上门</p>
              </div>
            </div>
            <div slot="footer" class="o_panel_footer">
              <van-button size="small" class="btn" @click="cancelOrder()">取消订单</van-button>
              <router-link :to="{path:'/orders/1'}">
                <van-button size="small" class="btn">查看详情</van-button>
              </router-link>
              <van-button size="small" class="btn yellow" tag="a" href="tel:18688888888" target="_blank">拨打电话</van-button>
            </div>
          </van-panel>
        </van-list>
      </van-tab>
    </van-tabs>
    <van-popup class="popup" v-model="isOrderShow">
      <div class="popup_header">
        <div class="popup_header_l"></div>
        <div class="popup_header_title">取消订单</div>
        <div class="popup_header_r">
          <i class="iconfont icon-guanbi" @click="isOrderShow=false"></i>
        </div>
      </div>
      <div class="popup_content">
        <div class="top">选择取消原因</div>
        <van-checkbox-group v-model="result" class="checkbox_group clearfix">
          <van-checkbox class="checkbox" v-for="item in cancelList" :key="item" :name="item">{{ item }}</van-checkbox>
        </van-checkbox-group>
        <div class="btn_box">
          <van-button class="btn" type="primary">完成</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 2,
      otabs: [
        { key: '1', name: '全部' },
        { key: '2', name: '待上门' },
        { key: '3', name: '待结算' },
        { key: '4', name: '待评价' },
        { key: '5', name: '异常单' }
      ],
      list: [],
      loading: false,
      finished: false,
      img: require('asset/images/1.png'),
      isOrderShow: false,
      cancelList: ['无人接单', '不想卖了', '选择线下交易', '等待时间过长'],
      result: []
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    onLoad() {
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 500);
    },
    cancelOrder(e) {
      this.isOrderShow = true;
    }
  }
};
</script>

<style lang="less">
.ui_orders {
  min-width: 100px;
  .tabs {
    .van-tab {
      font-size: 28px;
      color: #999;
      &.van-tab--active {
        color: #f7a427;
      }
    }
    .van-tabs__line {
      background-color: #f7a427;
    }
  }
  .o_panel {
    margin-bottom: 30px;
    .o_panel_header {
      display: flex;
      padding: 30px;
      .left_box {
        width: 150px;
        .img {
          display: block;
          width: 120px;
          height: 120px;
        }
      }
      .center_box {
        flex: 1;
        p {
          margin: 0;
          line-height: 40px;
          &.p1 {
            font-size: 28px;
            font-weight: bold;
            color: #333;
          }
          &.p2 {
            font-size: 24px;
            color: #999;
          }
        }
      }
      .right_box {
        width: 100px;
        p {
          margin: 0;
          font-size: 24px;
          color: #f7a427;
          text-align: right;
        }
      }
    }
    .o_panel_footer {
      text-align: right;
      .btn {
        //width: 136px;
        height: 52px;
        font-size: 24px;
        line-height: 52px;
        border-radius: 26px;
      }
      .yellow {
        color: #f7a427;
        border-color: #f7a427;
      }
    }
  }
  .popup {
    width: 540px;
    padding: 30px;
    border-radius: 20px;
    overflow: hidden;
    .popup_header {
      display: flex;
      .popup_header_l {
        width: 30px;
      }
      .popup_header_title {
        flex: 1;
        font-size: 32px;
        text-align: center;
        color: #333;
      }
      .popup_header_r {
        .iconfont {
          font-size: 30px;
        }
      }
    }
    .popup_content {
      .top {
        font-size: 28px;
        color: #5c5c5c;
        margin: 10px 0 30px;
      }
      .checkbox_group {
        //display: flex;
        .checkbox {
          float: left;
          width: 240px;
          padding-bottom: 20px;
        }
      }
      .btn_box {
        padding-top: 10px;
        text-align: center;
        .btn {
          width: 320px;
          height: 60px;
          font-size: 28px;
          line-height: 60px;
          background-color: #fbcb82;
          border-color: #fbcb82;
          border-radius: 30px;
        }
      }
    }
  }
}
</style>

